<!-- 这一块的结构应该是上下结构（上边是头像那一部分的导航栏），然后下面又分为左侧导航栏和右侧内容区
	，但是不知道它怎么实现的上面的导航栏悬浮在下面块上面但是左侧又缺一点的样式，似乎是通过container-fluid实现的 -->
<!-- 右上方的那一块横的导航栏，light可以改为dark -->
<header class="header-top" header-theme="light" id="app-header">
	<div class="container-fluid">
		<div class="d-flex justify-content-between">
			<div class="top-menu d-flex align-items-center">
				<!-- 这个按钮要屏幕很小时才会出现，屏幕很小时左侧导航栏默认不显示这个按钮就是弹出左侧导航栏用的 -->
				<button type="button" class="btn-icon mobile-nav-toggle d-lg-none"><span></span></button>
				<!-- 搜索用的三个块 -->
				<div class="header-search">
					<div class="input-group">
						<span class="input-group-addon search-close"><i class="ik ik-x"></i></span>
						<input type="text" class="form-control">
						<span class="input-group-addon search-btn"><i class="ik ik-search"></i></span>
					</div>
				</div>
				<!-- 全屏按钮 -->
				<button type="button" id="navbar-fullscreen" class="nav-link"><i class="ik ik-maximize"></i>
				</button>
			</div>
			<div class="top-menu d-flex align-items-center">
				<!-- 包裹铃声图标的通知按钮的div -->
				<div class="dropdown">
					<!-- 铃声图标按钮 -->
					<a class="nav-link dropdown-toggle" href="#" id="notiDropdown" role="button"
					   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i
							class="ik ik-bell"></i><span class="badge bg-danger">3</span></a>
					<!-- 点击铃声图标后的弹框 -->
					<div class="dropdown-menu dropdown-menu-right notification-dropdown"
						 aria-labelledby="notiDropdown">
						<!-- 弹框标题 -->
						<h4 class="header">Notifications</h4>
						<div class="notifications-wrap">
							<a href="#" class="media">
								<span class="d-flex">
                                                <i class="ik ik-check"></i>
                                            </span>
								<span class="media-body">
                                                <span class="heading-font-family media-heading">Invitation accepted</span>
                                                <span class="media-content">Your have been Invited ...</span>
                                            </span>
							</a>
							<a href="#" class="media">
                                            <span class="d-flex">
                                                <img :src="usersAvatar1" class="rounded-circle"
													 alt="user1">
                                            </span>
								<span class="media-body">
                                                <span class="heading-font-family media-heading">Steve Smith</span>
                                                <span class="media-content">I slowly updated projects</span>
                                            </span>
							</a>
							<a href="#" class="media">
                                            <span class="d-flex">
                                                <i class="ik ik-calendar"></i>
                                            </span>
								<span class="media-body">
                                                <span class="heading-font-family media-heading">To Do</span>
                                                <span class="media-content">Meeting with Nathan on Friday 8 AM ...</span>
                                            </span>
							</a>
						</div>
						<div class="footer"><a href="javascript:void(0);">See all activity</a></div>
					</div>
				</div>
				<!-- 好友上线数通知，注意这个和上面的不一样，好友侧边栏搜<aside class="right-sidebar"> -->
				<button type="button" class="nav-link ml-10 right-sidebar-toggle"><i
						class="ik ik-message-square"></i><span class="badge bg-success">4</span></button>
				<!-- 加号栏 -->
				<div class="dropdown">
					<a class="nav-link dropdown-toggle" href="#" id="menuDropdown" role="button"
					   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="ik ik-plus"></i></a>
					<div class="dropdown-menu dropdown-menu-right menu-grid" aria-labelledby="menuDropdown">
						<a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="top"
						   title="Dashboard"><i class="ik ik-bar-chart-2"></i></a>
						<a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="top"
						   title="Message"><i class="ik ik-mail"></i></a>
						<a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="top"
						   title="Accounts"><i class="ik ik-users"></i></a>
						<a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="top"
						   title="Sales"><i class="ik ik-shopping-cart"></i></a>
						<a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="top"
						   title="Purchase"><i class="ik ik-briefcase"></i></a>
						<a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="top"
						   title="Pages"><i class="ik ik-clipboard"></i></a>
						<a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="top"
						   title="Chats"><i class="ik ik-message-square"></i></a>
						<a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="top"
						   title="Contacts"><i class="ik ik-map-pin"></i></a>
						<a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="top" title="Blocks"><i
								class="ik ik-inbox"></i></a>
						<a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="top" title="Events"><i
								class="ik ik-calendar"></i></a>
						<a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="top"
						   title="Notifications"><i class="ik ik-bell"></i></a>
						<a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="top" title="More"><i
								class="ik ik-more-horizontal"></i></a>
					</div>
				</div>
				<!-- 头像左侧的栏，它的弹框定义看id是appsModal的div -->
				<button type="button" class="nav-link ml-10" id="apps_modal_btn" data-toggle="modal"
						data-target="#appsModal"><i class="ik ik-grid"></i></button>
				<!-- 头像栏 -->
				<div class="dropdown">
					<a class="dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown"
					   aria-haspopup="true" aria-expanded="false"><img class="avatar"
																	   :src="userAvatar" alt="Avatar"></a>
					<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
						<a class="dropdown-item" href="http://localhost:8080/pages/profile.html"><i
								class="ik ik-user dropdown-icon"></i>
							Profile</a>
						<a class="dropdown-item" href="#"><i class="ik ik-settings dropdown-icon"></i> Settings</a>
						<a class="dropdown-item" href="#"><span class="float-right"><span
								class="badge badge-primary">6</span></span><i class="ik ik-mail dropdown-icon"></i>
							Inbox</a>
						<a class="dropdown-item" href="#"><i class="ik ik-navigation dropdown-icon"></i> Message</a>
						<a class="dropdown-item" href="http://localhost:8080/pages/login.html"><i
								class="ik ik-power dropdown-icon"></i>
							Logout</a>
					</div>
				</div>

			</div>
		</div>
	</div>
</header>